<template>
	<div class="top">
		<Banner />
		<List ref="list" />
		<img v-if="gotop" src="../assets/img/totop.png" alt="" class="tops" @click="toTop">
	</div>
</template>

<script>
	import Banner from "../components/top/banner.vue";
	import List from "../components/top/list.vue";
	export default {
		name: "",
		components: {
			Banner,
			List,
		},
		data() {
			return {
				gotop: false,
			};
		},
		mounted() {
			this.$refs.list.getData(this.$route.query.shop_id)
			window.addEventListener("scroll", this.handleScroll, true);
		},
		methods: {
			handleScroll() {
				let scrolltop =
					document.documentElement.scrollTop || document.body.scrollTop;
				scrolltop > 50 ? (this.gotop = true) : (this.gotop = false);
			},
			toTop() {
				let top = document.documentElement.scrollTop || document.body.scrollTop;
				// 实现滚动效果
				const timeTop = setInterval(() => {
					document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
					if (top <= 0) {
						clearInterval(timeTop);
					}
				}, 10);
			},
		},
	};
</script>

<style scoped lang="scss">
	.tops {
		z-index: 999;
		position: fixed;
		top: 45%;
		right: 8%;
		width: 4.94rem;
		height: 4.94rem;
	}
</style>
